<template>
  <div>
    <div class="app-container">
      <div class="search-container">

        <!-- 按钮 -->
        <div class="button-container">
          <el-button :disabled="false" type="danger" @click="submitForm(ruleFormRef)"><el-icon>
              <Plus />
            </el-icon>&nbsp;新增</el-button>
          <el-button :disabled="true" type="danger"><el-icon>
              <Plus />
            </el-icon>&nbsp;保存</el-button>
          <el-button :disabled="true" type="danger"><el-icon>
              <Plus />
            </el-icon>&nbsp;撤销</el-button>
          <el-button :disabled="true" type="danger"><el-icon>
              <Plus />
            </el-icon>&nbsp;删除</el-button>
        </div>
        <!-- 负责人和断奶日期 -->
        <div class="sel">
          <!-- <el-form ref="ruleFormRef" :model="addform" label-width="auto" class="demo-ruleForm" :rules="rules"
            :size="formSize" status-icon> -->
          <el-form ref="ruleFormRef" :model="addform" label-width="auto" class="demo-ruleForm" :size="formSize"
            status-icon>
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="负责人" prop="userId">
                  <el-select v-model="addform.userId" clearable>
                    <el-option label="admin" value="1" />
                    <el-option label="孟盘龙" value="2" />
                    <el-option label="赵思彤" value="3" />
                    <el-option label="赵秋实" value="4" />
                    <el-option label="牛骞若" value="5" />
                    <el-option label="于晋哲" value="6" />
                    <el-option label="刘永刚" value="7" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="断奶日期" prop="ablactation">
                  <el-date-picker v-model="addform.ablactation" type="date" value-format="YYYY-MM-DD"
                    placeholder="请选择" />
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>

      </div>
    </div>
    <div class="select">
      <el-table :data="array" border height="540px" style="width: 100%">
        <el-table-column prop="id" label="序号" align="center" width="150px" />
        <el-table-column label="耳号" align="center">
          <template v-slot="scope">
            <el-select v-model="scope.row.eartag" placeholder="耳号" style="width: 150px" clearable
              @change="getEarBuild()">
              <el-option v-for="item in eweEartages" :label="item.earTagNumber" :value="item.earTagNumber" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="哺乳天数" align="center">
          <template v-slot="scope">
            <el-input v-model="scope.row.suckleNum" style="width: 150px" />
          </template>
        </el-table-column>
        <el-table-column label="当前栋舍" align="center">
          <template v-slot="scope">
            <el-select v-model="scope.row.currentBuilding" style="width: 150px" :disabled="true" clearable
              @change="getColumns(scope.row.currentBuilding)">
              <el-option v-for="item in cottages" :label="item.ridgepoleName" :value="item.ridgepoleId" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="当前栏位" align="center">
          <template v-slot="scope">
            <el-select v-model="scope.row.currentField" style="width: 150px" :disabled="true" clearable>
              <el-option v-for="item in columns" :label="item.columnName" :value="item.columnManagementId" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="转入栋舍" align="center">
          <template v-slot="scope">
            <el-select v-model="scope.row.toBuildingManageId" placeholder="请选择栋舍" :disabled="false" style="width: 150px"
              clearable @change="getColumns(scope.row.toBuildingManageId)">
              <el-option v-for="item in cottages" :label="item.ridgepoleName" :value="item.ridgepoleId" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="转入栏位" align="center">
          <template v-slot="scope">
            <el-select v-model="scope.row.toColumMangementId" placeholder="请选择栏位" :disabled="false" style="width: 150px"
              clearable>
              <el-option v-for="item in columns" :label="item.columnName" :value="item.columnManagementId" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="断奶只数" align="center">
          <template v-slot="scope">
            <el-input v-model="scope.row.ablactationNum" style="width: 150px" />
          </template>
        </el-table-column>
        <el-table-column label="断奶总窝重（公斤）" align="center">
          <template v-slot="scope">
            <el-input v-model="scope.row.ablactationWeight" style="width: 150px" />
          </template>
        </el-table-column>
        <el-table-column label="种母重量（公斤）" align="center">
          <template v-slot="scope">
            <el-input v-model="scope.row.breedingWeight" style="width: 150px" />
          </template>
        </el-table-column>
      </el-table>
      <div class="count1">
        <el-button link type="danger" @click="Addform()"> + 增行 </el-button>
        <el-button link type="danger" @click="Deleteform()"> - 删行 </el-button>
      </div>
      <div class="count2">
        <el-form ref="ruleFormRef" :model="addform" label-width="auto" class="demo-ruleForm" status-icon>
          <el-form-item label="备注">
            <el-input v-model="addform.ablactationCause" type="textarea" placeholder="请输入备注信息" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { carouselItemProps, type ComponentSize, type FormInstance, type FormRules } from "element-plus";
import sheepAblactations from '@/api/ProductionManagement/SheepAblactation/index'

//生命周期钩子
onMounted(() => {
  //获取栋舍
  getRidgepole()
  //根据栋舍获取栏位
  //获取档案表母羊在哺乳的耳号列表
  getEar()
});

const router = useRouter();
const route = useRoute();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

// 负责人和断奶日期、备注
const addform = reactive({
  userId: "",
  ablactation: "",
  ablactationCause: "",
});
//要添加的数据
let array: any = reactive([
  {
    //序号
    id: 1,
    //耳号
    eartag: "",
    //电子耳号
    elEartage: "",
    //哺乳天数
    suckleNum: "",
    //当前栋舍
    currentBuilding: "",
    //当前栏位
    currentField: "",
    //转入栋舍
    toBuildingManageId: "",
    //转入栏位
    toColumMangementId: "",
    //断奶只数
    ablactationNum: "",
    //断奶总窝重
    ablactationWeight: "",
    //种母重量
    breedingWeight: "",
    //创建人
    createName: "",
    //创建时间
    createTime: "2024-08-02",
    //负责人
    userId: "",
    //断奶日期
    ablactation: "",
    //断奶原因
    ablactationCause: "",
    //单据号
    documentNumber: "",
  },
]);
//增行
const c = ref(0);
const Addform = () => {
  c.value = 1;
  array.forEach((item: any) => {
    c.value++;
  });
  if (c.value > 15) {
    ElMessage.error("单次最多添加15行")
    return
  }
  array.push({
    id: c.value,
    eartag: "",
    elEartage: "",
    suckleNum: "",
    currentBuilding: "",
    currentField: "",
    toBuildingManageId: "",
    toColumMangementId: "",
    ablactationNum: "",
    ablactationWeight: "",
    breedingWeight: "",
    createName: "",
    createTime: "",
    userId: "",
    documentNumber: "",
  });
  localStorage.setItem("data", JSON.stringify(array));
};
//减行
const Deleteform = () => {
  array.pop();
  localStorage.setItem("data", JSON.stringify(array));
};
//获取负责人
//获取栋舍
const cottages: any = ref([])
const getRidgepole = () => {
  sheepAblactations.getRidgepoleAsync().then(res => {
    cottages.value = res.data.data
  })
}
//获取栏位根据栋舍Id
const columns = ref([])
const getColumns = (ridgepoleId: number) => {
  debugger;
  columns.value = []
  sheepAblactations.getColumnByRidId(ridgepoleId).then(res => {
    columns.value = res.data
  })
}
//获取档案表母羊在哺乳的耳号列表
const eweEartages = ref([])
const getEar = () => {
  sheepAblactations.getSheepAblactationEarList().then(res => {
    eweEartages.value = res.data
  })
}
//获取耳号的当前栋舍Id
const getEarBuild = () => {
  // debugger;
  array.forEach((item: any) => {
    sheepAblactations.getBuildByEar(item.eartag).then(res => {
      console.log(res.data)
      item.currentBuilding = res.data[0].buildingId
      getColumns(res.data[0].buildingId)
      item.currentField = res.data[0].columnId
      //item.currentField = res.data[0].columnId
    })
  })
}
//种母断奶添加数据
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (addform.userId == null || addform.userId == "") {
        ElMessage.error('请选择负责人')
        return
      }
      if (addform.ablactation == null || addform.userId == "") {
        ElMessage.error('请选择断奶日期')
        return
      }
      array.value.forEach((item: any) => {
        item.ablactation = addform.ablactation;//断奶日期
        item.userId = addform.userId;//负责人
        item.ablactationCause = addform.ablactationCause;//断奶原因备注
      });
      debugger;
      console.log(array.value)
      sheepAblactations.AddEweWeaning(array.value)
        .then((res) => {
          ElMessage.success("添加成功！");
          router.push("/EweWeaning");
        })
        .catch((error) => {
          ElMessage.error("添加失败");
          return;
        });
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>


<!-- 样式 -->
<style scoped>
.button-container {
  width: 100%;
  height: 40px;
}

.sel {
  width: 100%;
  height: 40px;
}

.select {
  margin-left: 1%;
  width: 98%;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
  margin-top: -15px;
}

.count {
  width: 100%;
  height: 40px;
  font-weight: bold;
  border-bottom: 2px solid #f4f5f8;
  border-left: 2px solid #f4f5f8;
  border-right: 2px solid #f4f5f8;
  padding: 10px;
}

.count1 {
  width: 100%;
  height: 40px;
  border-bottom: 2px solid #f4f5f8;
  border-left: 2px solid #f4f5f8;
  border-right: 2px solid #f4f5f8;
  padding: 10px;
}

.count2 {
  width: 100%;
  height: 53px;
  border-bottom: 2px solid #f4f5f8;
  border-left: 2px solid #f4f5f8;
  border-right: 2px solid #f4f5f8;
  padding-bottom: 10px;
  padding-left: 10px;
}
</style>